/**
 * 封装概况
 */
import React from 'react';
import { Row, Col, Tabs, Avatar, List, Card,Form,Select,Modal,DatePicker,Button } from 'antd';
const TabPane = Tabs.TabPane;
const { Meta } = Card
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
// 引入Cookie
// import Cookie from 'js-cookie'
// 引入异步请求
// import { request } from 'config/request'
import { queryList } from './overviewServ'

import styles from './index.less'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);
// 导入项目全局配置文件
import config, { listConfig } from 'config/config'
const FormItem = Form.Item
const Option = Select.Option;
// const confirm = Modal.confirm;
const { MonthPicker, RangePicker } = DatePicker
import moment from 'moment'

// console.log(FormItem)
import ReactEcharts from 'echarts-for-react';
import ListPage from 'widget/PageTmpl/ListPage'
class RealTime extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      queryList: [],
      tableQuery: {
        startDate: moment().subtract(1,"months").format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      },
    }
  }
  //完成：正在被重新渲染，状态已变化
  componentDidUpdate(prevProps, prevState) {
  }
  componentWillReceiveProps(nextProps) {

  }
  componentDidMount() {
    let params={}
    this.getList(params);
    // console.log(this.state)
  }
  componentWillUnmount() {

  }
  async getList(payload) {
    const _this = this
    let {success,rows} = await queryList(payload)
    // console.log(rows)
    if(success){
      _this.setState({
        queryList:rows
      });
      // console.log(this.state)
    }
    // this.state.list=rows
    // console.log(List)
    console.log('请求示例')
    //接口请求示例
    // return request({
    //   url: `admin/agent/list`,
    //   method: 'POST',
    //   data: {},
    //   headers: '',
    //   app: ''
    // }).then((result) => {
    //   let { rows } = result
    //   this.state.List = rows
    // })
  }



  render() {
    console.log('render')
    const { getFieldDecorator } = this.props.form
    let { tableQuery } = this.state
    let option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        // data: ['领取人数', '转赠人数', '核销人数'],
        // x: 'center',
        // y: 'bottom'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name: '月份',
        boundaryGap: false,
        data: ['2018-08', '2018-09', '2018-10', '2018-11', '2018-12', '2019-01', '2019-02']
        // data: monthList
      },
      yAxis: {
        type: 'value',
        name: '人数'
      },
      series: [
        {
          name: '累计访问人数',
          type: 'line',
          // stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
          // data: receiveNum
          color: '#0877FD',
          areaStyle: { normal: {} },//折线背影
        },
        // {
        // 	name: '转赠人数',
        // 	type: 'line',
        // 	// stack: '总量',
        // 	data: [220, 182, 191, 234, 290, 330, 310]
        // 	// data: transferNum
        // },
        // {
        // 	name: '核销人数',
        // 	type: 'line',
        // 	// stack: '总量',
        // 	data: [150, 232, 201, 154, 190, 330, 410]
        // 	// data: checkerNum
        // }
      ]
    };


    const CardInfo = ({ month, week, day }) => (
      <div className={cx('cardInfo')}>
        <div>
          <span>月</span>
          <span className={cx('ml10')}>{month}</span>
        </div>
        <div>
          <span>周</span>
          <span className={cx('ml10')}>{week}</span>
        </div>
        <div>
          <span>天</span>
          <span className={cx('ml10')}>{day}</span>
        </div>
      </div>
    );
    
    let pageProps = {
      // ---------- 界面部分 ----------
      "ui": {
        // 页面接口地址
        "api_url": "admin/agent/queryBrokerByMobile",
        // 接口方式
        "method": "POST",
        "app": "",
        // 接口参数
        "params": "pageNo=1&pageSize=10",
        // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
        // "mockData": mockData,
        "mockData": null,
        // 查询栏
        "search_bar": {
          "fields": [
            {
              en_name: 'mobile',
              zh_name: '手机号码',
              elem_type: 'Input',
              elem_valid_type: 'string',
            },
          ],
          searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
            console.log('search click')
          },
          resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
            console.log('reset click')
          },
          searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
            console.log('search finish', params)
          },
          pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
            'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
          ]
        },
        // 数据表格
        "table":
        {
          "status_params": "status=0",
          "status_text": "全部",
          // 表头字段列表
          "scroll": { x: 1000 },
          "fields": [
            {
              "en_name": "name",
              "zh_name": "姓名",
            },
            {
              "en_name": "mobile",
              "zh_name": "手机号",
              width: 130
            },
            {
              "en_name": "gender",
              "zh_name": "性别",
            },
            {
              "en_name": "createTime",
              "zh_name": "创建时间",
            },
          ]
        },
      },
    }


    //   console.log(this.props)
    return (
      <div>
        <CollapsiblePanels title={'实时访问次数'} hideUpDownBtn={true}>
          <div>
            <div className="public_listMain">
              <div className="boxShadow listSearchBox">
                <Row>
                  <Col {...listConfig.searchCol}>
                    <FormItem {...listConfig.searchFormItem} label={'查询范围'}>
                      {
                        getFieldDecorator('daysa', {
                          initialValue: '',
                          rules: [
                            {
                              required: false, message: '请选择'
                            },
                          ],
                        })
                          (
                            <Select onChange={(e) => { handleChange(e) }}>
                              <Option value="1">累计访问人数</Option>
                              <Option value="2">打开次数</Option>
                              <Option value="3">访问次数</Option>
                              <Option value="4">访问人数</Option>
                              <Option value="5">新访问人数</Option>
                              <Option value="6">分享次数</Option>
                              <Option value="7">分享人数</Option>
                              <Option value="8">人均停留时长</Option>
                              <Option value="9">次均停留时长</Option>
                              <Option value="10">总添加人数</Option>
                              <Option value="11">新添加人数</Option>
                            </Select>
                          )
                      }
                    </FormItem>
                    <FormItem {...listConfig.searchFormItem} label={'查询范围'}>
                      {
                        getFieldDecorator('days', {
                          initialValue: '',
                          rules: [
                            {
                              required: false, message: '请选择'
                            },
                          ],
                        })
                          (
                            <Select onChange={(e) => { handleChange(e) }}>
                              <Option value="1">最近7天</Option>
                              <Option value="2">最近30天</Option>
                              {/* <Option value="3">自定义</Option> */}
                            </Select>
                          )
                      }
                    </FormItem>

                    <FormItem {...listConfig.searchFormItem} label={'日期'}>
                      {
                        getFieldDecorator('month', {
                          initialValue: (tableQuery && tableQuery.startDate && tableQuery.endDate)
                            ? [moment(tableQuery.startDate, 'YYYY-MM-DD'), moment(tableQuery.endDate, 'YYYY-MM-DD')]
                            : [],
                          rules: [
                            {
                              required: false, message: '请选择日期'
                            },
                          ],
                        })
                          (
                            <RangePicker style={{ width: "100%" }}
                              allowClear={false}
                              ranges={{ '今天': [moment(), moment()], '这个月': [moment(), moment().endOf('month')] }}
                              showTime
                              format='YYYY-MM-DD HH:mm:ss'
                              onChange={(value, dateString) => {
                                tableQuery.startDate = dateString[0]
                                tableQuery.endDate = dateString[1]
                                dispatch({ type: `${namespace}/updateStore`, payload: { tableQuery } })
                              }}
                            />
                          )
                      }
                    </FormItem>


                  </Col>
                  <Col {...listConfig.searchCol} >
                    <Button type="primary" htmlType="submit" onClick={e => { dispatch({ type: `${namespace}/searchData` }) }} >搜索</Button>
                    <Button type="default" htmlType="button" onClick={e => { dispatch({ type: `${namespace}/resetMonth`, payload: { cb: () => { resetFields(['month']) } } }) }}>重置</Button>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          <ReactEcharts option={option} />
        </CollapsiblePanels>
        <CollapsiblePanels title={'页面访问数据'} hideUpDownBtn={true}>
          <ListPage pageProps={pageProps} />
        </CollapsiblePanels>

      </div>
    )
  }
}


export default Form.create()(RealTime)